<template>
    <div class="attractInvestment">
        <h2 v-if="look">查看招标信息</h2>
        <div v-else>
            <h2 v-if="id">编辑招标信息</h2>
            <h2 v-else>新增招标信息</h2>

        </div>

        <div class="main mt-40">
            <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item ref="title" label="标题" prop="title">
                    <a-input :disabled="look" v-model="form.title" placeholder="请输入标题" />
                </a-form-model-item>

                <a-form-model-item label="来源" prop="link">
                    <a-input :disabled="look" v-model="form.link" />
                </a-form-model-item>
                <a-form-model-item label="摘要" prop="remark">
                    <a-input :disabled="look" v-model="form.remark" type="textarea" />
                </a-form-model-item>

                <a-form-model-item label="内容" class="content-cls" prop="profile">
                    <editor-bar :disabled="look" v-model="form.profile" placeholder="请输入内容"
                        :openNullCheck="true"></editor-bar>
                </a-form-model-item>

                <!-- <a-form-model-item label="附件">
          <a-upload v-if="!look && form.merchantsFile.length<5" :action="UploadUrl" :headers="headers" :before-upload="beforeUpload" @change="handleChange" :show-upload-list="false">
            <a-button type="primary"> 上传附件</a-button>
          </a-upload>
          <div>
            <div class="files_box" v-for="(item,index) in form.merchantsFile" :key="index">
              <a :href="item.fileUrl" target="_blank" download="">{{item.fileName}}</a>
              <a-icon v-if="!look" @click="DelImg(index)" class="close" type="close" />
            </div>
          </div>
        </a-form-model-item> -->

                <a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
                    <span v-if="!look">
                        <a-button v-if="id == ''" :disabled="IsDisabled" type="primary" @click="onSubmit" class="mr-20">
                            提交
                        </a-button>
                    </span>
                    <span v-if="!look">
                        <a-button v-if="id != ''" :disabled="IsDisabled" type="primary" @click="onSaveSubmit"
                            class="mr-20">
                            保存
                        </a-button>
                    </span>
                    <a-button>
                        <router-link to="/usercenter/OtherInformation">
                            返回
                        </router-link>
                    </a-button>

                    <!-- <a-button style="margin-left: 10px;" @click="resetForm">
            Reset
          </a-button> -->
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script>
import {
    addEntMerchants,
    getentMerchantsinfo,
    updateEntMerchants,
} from "@/apis/user/EntMerchants";
import { getAnnouncemeDetailById, addAnnounceme, editAnnounceme } from '@/apis/com/announceme'

import { getToken } from "@/utils/auth"; // get token from cookie

import EditorBar from "@/components/wangEnduit/index.vue";
export default {
    components: { EditorBar },
    data () {
        return {
            id: "",
            UploadUrl: GolbUrl._BASE_URL_ + "wenge/microservice-supply-consumer-web/sysFile/upload",
            // UploadUrl: "http://10.204.124.107:8081/microservice-supply-consumer-web/wenge/sysFile/upload",
            IsDisabled: false,
            isClear: false,
            headers: {
                Authorization: getToken(),
            },
            detail: "",
            labelCol: { span: 2 },
            wrapperCol: { span: 14 },
            other: "",
            form: {
                title: "",
                link: "",
                remark: "",
                profile: "",
                // merchantsFile: [],
                type: 2, //类型（1:招商;2:招标）
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: "请输入标题",
                        trigger: "blur",
                    },
                    {
                        max: 20,
                        message: "标题不能超过20个字",
                        trigger: "blur",
                    },
                ],
                link: [
                    {
                        required: true,
                        message: "请输入来源",
                        trigger: "blur",
                    },
                    {
                        max: 20,
                        message: "来源不能超过20个字",
                        trigger: "blur",
                    },
                ],
                remark: [
                    {
                        required: true,
                        message: "请输入摘要",
                        trigger: "blur",
                    },
                    {
                        max: 100,
                        message: "摘要不能超过100个字",
                        trigger: "blur",
                    },
                ]
            },
        };
    },
    created () {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
            this.getentMerchantsinfo();
        }
        if (this.$route.query.look == true + "") {
            this.look = true;
        } else {
            this.look = false;
        }
    },
    methods: {
        // 移除附件
        DelImg (index) {
            this.form.merchantsFile.splice(index, 1);
        },
        beforeUpload (file) {
            let _type = file.name.substring(file.name.indexOf("."));
            const isJpgOrPng =
                _type === ".doc" ||
                _type === ".docx" ||
                _type === ".wps" ||
                _type === ".pdf" ||
                _type === ".xls" ||
                _type === ".xlsx";
            if (!isJpgOrPng) {
                this.$message.warning("请上传正确的文件格式");
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                this.$message.warning("请上传5M以内的大小图片");
                return false;
            }
            return isJpgOrPng && isLt2M;
        },

        handleChange (info) {
            console.log(info);
            if (info.file.status === "uploading") {
                this.loading = true;
                return;
            }
            if (info.file.status === "done") {
                if (this.form.merchantsFile == null) {
                    this.form.merchantsFile = [];
                }
                // Get this url from response in real world.
                let _files = {
                    fileName: info.file.response.data.fileName,
                    fileType: info.file.response.data.fileType,
                    fileUrl: info.file.response.data.fileUrl,
                    objectType: 6, //1:产品图片;2:产品资质荣誉;3:企业资质;4:企业荣誉奖项;5:招商附件;6:招标附件
                };
                this.form.merchantsFile.push(_files);
            }
        },
        onSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if (this.form.merchantsContent !== '') {
                        this.addEntMerchants(this.form)
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        onSaveSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if (this.form.merchantsContent !== '') {
                        this.updateEntMerchants(this.form)
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm () {
            this.$refs.ruleForm.resetFields();
        },

        // 获取详细信息
        getentMerchantsinfo () {
            getAnnouncemeDetailById(this.id)
                .then((res) => {
                    if (res.code == 200) {
                        this.form = res.data;
                    }
                })
                .catch((error) => { });
        },
        //新增保存
        addEntMerchants (_params) {
            let that = this;
            that.IsDisabled = true;
            addAnnounceme(_params)
                .then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        that.$message.success("新增成功");
                        setTimeout(() => {
                            that.IsDisabled = false;
                            this.$router.back()
                        }, 50);
                    } else {
                        that.IsDisabled = false;
                        that.$message.warning("新增失败");
                    }
                })
                .catch((error) => {
                    that.IsDisabled = false;
                });
        },

        updateEntMerchants (_params) {
            this.IsDisabled = true;
            editAnnounceme(_params)
                .then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("修改成功");
                        setTimeout(() => {
                            this.IsDisabled = false;
                            this.$router.push("/usercenter/OtherInformation");
                        }, 50);
                    } else {
                        this.IsDisabled = false;
                        this.$message.warning("修改失败");
                    }
                })
                .catch((error) => {
                    this.IsDisabled = false;
                });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.w-e-text {
    min-height: 500px;

    max-height: 500px;
}

.attractInvestment {
    padding: 21px 24px;
    background-color: #fff;
    border-radius: 4px;

    h2 {
        font-size: 22px;
        color: #303133;
        font-weight: 700;
        padding-bottom: 14px;
        border-bottom: solid 1px #e9e9e9;
    }

    /deep/ .content-cls.ant-form-item {
        .ant-form-item-label {
            label {
                &::before {
                    display: inline-block;
                    margin-right: 4px;
                    color: #f5222d;
                    font-size: 14px;
                    font-family: SimSun, sans-serif;
                    line-height: 1;
                    content: "*";
                }
            }
        }
    }
}

.files_box {
    position: relative;
    background-color: #f3f3f3;
    padding: 0 5px;
    margin-top: 10px;

    &:hover {
        .close {
            display: block;
        }
    }

    .close {
        position: absolute;
        right: 10px;
        top: 12px;
        cursor: pointer;
        color: #fff;
        background-color: #188af1;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        line-height: 20px;
        vertical-align: middle;
        display: none;
    }
}
</style>